<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    .sum-count-main {
        width: 100%;
        margin: 30px auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .sum-count-main > div {
        width: 95%;
        margin: auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .sum-count-item {
        width: 20%;
        margin: auto 2.5%;
        border: 1px solid #ccc;
        border-radius: 10px;
        background: #FFF;
        padding: 8px;
        float: left;
        text-align: center;
    }

    .sum-count-item img {
        width: 64px;
        height: 64px;
        margin: 0 8px 28px 0;
        vertical-align:middle;
    }

    .sum-count-item span {
        font-size: 32px;
        font-weight: 400;
        color: #6C7071;
        margin: 5px auto;
    }

    .sum-count-item p {
        font-size: 14px;
        font-weight: bold;
        margin: -24px 0 0 0;
        color: #000;
    }

    .chart-report-main {
        width: 100%;
        margin: 30px auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .chart-report-main > div {
        width: 95%;
        margin: auto;
        height: 300px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .chart-report-item {
        width: 48%;
        margin: auto 2%;
        border-radius: 10px;
        height: 320px;
        float: left;
    }
</style>

<div class="sum-count-main">
    <div>
        <div class="sum-count-item">
            <img src="${base}/img/user-report.png"/>
            <span>343</span>
            <p>关注人数</p>
        </div>
        <div class="sum-count-item">
            <img src="${base}/img/goods-report.png" />
            <span>1212</span>
            <p>商品数量</p>
        </div>
        <div class="sum-count-item">
            <img src="${base}/img/sales-report.png" />
            <span>322.2</span>
            <p>订单总额</p>
        </div>
        <div class="sum-count-item">
            <img src="${base}/img/prize-report.png" />
            <span>23</span>
            <p>发放奖品</p>
        </div>
    </div>
</div>
<div class="chart-report-main">
    <div>
        <div class="chart-report-item" id="user-report"></div>
        <div class="chart-report-item" id="goods-report"></div>
    </div>
</div>
<div class="chart-report-main">
    <div>
        <div class="chart-report-item" id="sales-report"></div>
        <div class="chart-report-item" id="prize-report"></div>
    </div>
</div>
<script src="${base}/static/vendor/echart/echarts.common.min.js"></script>
<script type="text/javascript" src="${base}/static/js/user-report.js"></script>
<script type="text/javascript" src="${base}/static/js/goods-report.js"></script>
<script type="text/javascript" src="${base}/static/js/sales-report.js"></script>
<script type="text/javascript" src="${base}/static/js/prize-report.js"></script>

